<template>
    <div style="width: 60%">
        <button @click="pal">Palpay</button>
        <center><h1>扫码支付</h1></center>


        <a-form-item v-bind="formItemLayout" label="金额">
            <a-input v-model="money"/>
        </a-form-item>


        <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit" @click="submit">
                生成二维码
            </a-button>
            <a-button type="primary" html-type="submit" @click="geet">
                查询订单结果
            </a-button>
        </a-form-item>


        <a-form-item v-bind="formItemLayout" label="二维码">

            <img :src="src" />

        </a-form-item>


    </div>

</template>



<script>

export default {
    data() {
        return {
            money:'',
            src:"",
            order_id: '',
            formItemLayout: {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            },
            tailFormItemLayout: {
                wrapperCol: {
                    xs: {
                        span: 24,
                        offset: 0,
                    },
                    sm: {
                        span: 16,
                        offset: 8,
                    },
                },
            },
            dataSource: [
                {
                    key: '0',
                    name: 'Edward King 0',
                    age: '32',
                    address: 'London, Park Lane no. 0',
                },
                {
                    key: '1',
                    name: 'Edward King 1',
                    age: '32',
                    address: 'London, Park Lane no. 1',
                },
            ],
            columns: [
                {
                    title: 'name',
                    dataIndex: 'name',
                },
                {
                    title: 'age',
                    dataIndex: 'age',
                },
                {
                    title: 'address',
                    dataIndex: 'address',
                },
                {
                    title: 'operation',
                    dataIndex: 'operation',
                    scopedSlots: { customRender: 'operation' },
                },
            ],
        };
    },
    methods: {

        submit:function(){

            this.$axios.post('vzf/',{
                'total': this.money
            }).then((result) =>{

                console.log(result.data);

                this.src = "http://localhost:8000/file/"+result.data.url

            });

        },
        geet(){
            this.$axios.get('vzf/',{
                'params':{
                    'order_id': this.order_id,
                    'uid': sessionStorage.getItem('token')
                }
            }).then((result) =>{

                console.log(result.data);

                this.src = "http://localhost:8000/file/"+result.data

            });
        }
        ,
        onDelete(key) {
            console.log(this.dataSource[key]);
        },
        pal(){
            this.$axios.post('palpay/',{
                'total': this.money
            }).then(resp=>{
                if(resp.data.code == '200'){
                    window.location.replace(resp.data.url)
                }else {
                    console.log(resp.data)
                    alert(resp.data.msg)
                }
            })
        }

    },
};
</script>
